<template>
  <div
    class="echarts"
    :style="{
      height: isPdf ? '39.3px' : '50px',
    }"
  >
    <ECharts
      v-if="option && !imgLabel"
      :option="option"
      :id="`Line` + props.id"
      ref="lineBarEChartsRef"
    />
    <img v-if="imgLabel" :src="imgLabel" width="100%" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  showName: {
    type: Boolean,
    default: true,
  },

  ydata: {
    type: Object,
    default: () => [],
  },
  xdata: {
    type: Object,
    default: () => [],
  },
  xdataIndex: {
    type: Object,
    default: () => [],
  },
  yobjData: {
    type: Object,
    default: () => [],
  },
  isPdf: {
    type: Boolean,
    default: false,
  },
  // 曲线x轴/y轴数据
  seriesData: {
    type: Object,
    default: () => {
      return {
        // paramName: "Joumnal 2 C-Diameter (centre)[MM]",
        // upperLimitValue: 23.995,
        // lowerLimitValue: 23.969,
        // controlDown: 23.975,
        // controlUp: 23.991,
        // parameterStandards: 23.985,
        // legend: ["相对频率[%]", "绝对频率[%]"],
        ydata1: [
          0, 13, 26, 14, 15, 13, 25, 21, 6, 26, 32, 2, 4, 13, 6, 4, 11, 0, 13,
          26, 14, 15, 13, 25, 21, 6, 26, 32, 2, 4, 13, 6, 4, 11,
        ],
        ydata2: [
          0, 13, 22, 14, 15, 12, 20, 21, 6, 20, 26, 2, 4, 13, 6, 4, 11, 0, 13,
          26, 14, 15, 13, 22, 21, 6, 33, 23, 2, 4, 13, 6, 4, 11,
        ],
        xdata: [
          [
            23.956, 23.957, 23.968, 23.969, 23.97, 23.971, 23.972, 23.973,
            23.974, 23.975, 23.976, 23.977, 23.978, 23.979, 23.98, 23.981,
            23.982, 23.983, 23.984, 23.985, 23.986, 23.987, 23.988, 23.989,
            23.99, 23.991, 23.992, 23.993, 23.994, 23.995, 23.996, 23.997,
            23.998, 23.999,
          ],
        ],
        yobjData: [250, 380, 515, 243, 280, 500, 280, 540, 243, 280, 260],
      };
    },
  },
});
const { seriesData, showName, ydata, xdata, yobjData, xdataIndex, isPdf } =
  toRefs(props);
const emit = defineEmits(["cpkNumberChange"]);

const option = ref();
const lineBarEChartsRef = ref();

const rich: any = {
  name1: {
    fontSize: 12,
    height: 12,
  },
  name2: {
    fontSize: 10,
    height: 10,
    padding: [3, 0, 0, 0],
  },
};

// 折线图数据变更
const xAxisLabel = ref([]);
watch(
  () => seriesData.value,
  (newVal) => {
    // xAxisLabel.value = [];
    // let arr: any = [];
    // seriesData.value?.yobjData?.map((e: any) => {
    //   arr.push(e.detectionTime ?? "");
    // });
    // xAxisLabel.value = arr;
    setOptions();
  },
  {
    deep: true,
    immediate: true,
  }
);

function setOptions() {
  option.value = {
    animation: false,
    // animationDuration: 3 * 100,
    color: ["#4A95FF", "rgb(45, 93, 231)", "#15b3ff", "rgb(69,108,244)"],
    // tooltip: {
    //   trigger: "axis",
    //   textStyle: {
    //     align: "left",
    //     fontSize: 13,
    //     lineHeight: 20,
    //   },
    // },
    grid: {
      left: "6%",
      top: "26",
      right: "6%",
      height: "auto",
      // minHeight: 400, // 单位为像素
      bottom: "0",
      containLabel: true,
    },

    xAxis: [
      {
        type: "category",
        data: seriesData.value.xdata[0] || [],
        axisLabel: {
          show: false,
          fontSize: 12,
          color: props.isPdf ? "#000" : "#606266",
        },
        axisTick: {
          show: false,
          alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "相对频率[%]",
        boundaryGap: false,
        offset: 0, // 坐标轴相对于默认位置的偏移:无偏移
        axisLine: {
          show: false, // 是否显示坐标轴线
        },
        min: function (value: any) {
          return computedMin(value.min);
        },
        max: function (value: any) {
          return computedMax(value.max);
        },
        splitLine: { show: false }, // ⭐️ 关键：隐藏 Y 轴分割线（横线）
        position: "left",
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          fontSize: 12,
          color: props.isPdf ? "#000" : "#606266",
        },
        nameTextStyle: {
          show: false,
          padding: 16,
          fontSize: props.isPdf ? 12 : 13,
          color: "#05c46b",
        },
        nameLocation: "center",
      },
      {
        type: "value",
        name: "绝对频率[%]",
        position: "right",
        nameLocation: "center",
        min: function (value: any) {
          return computedMin(value.min);
        },
        max: function (value: any) {
          return computedMax(value.max);
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false, // 是否显示坐标轴线
        },
        splitLine: { show: false }, // ⭐️ 关键：隐藏 Y 轴分割线（横线）
        axisLabel: {
          show: false,
          fontSize: 12,
          color: props.isPdf ? "#000" : "#606266",
        },
        nameTextStyle: {
          padding: 16,
          fontSize: props.isPdf ? 12 : 13,
          color: "#ff3838",
        },
      },
    ],

    series: [
      {
        name: "绝对频率[%]",
        type: "line",
        data: seriesData.value.ydata1 || [],
        yAxisIndex: 1,
        smooth: true, // 平滑曲线
        symbol: "none",
        symbolSize: 6,
        lineStyle: {
          width: 1.5,
        },

        markLine: {
          symbol: ["none", "arrow"],
          label: {
            show: true,
            fontSize: 12,
          },
          symbolSize: 5,
          data: [
            // {
            //   name: "上公差限",
            //   xAxis: seriesData.value.upperLimitValue.toString(),
            //   label: {
            //     color: "red",
            //     lineHeight: 8,
            //     formatter: function (value: any) {
            //       return value.name;
            //     },
            //   },
            // },
            // {
            //   name: "下公差限",
            //   xAxis: seriesData.value.lowerLimitValue.toString(),
            //   label: {
            //     color: "red",
            //     lineHeight: 8,
            //     formatter: function (value: any) {
            //       return value.name;
            //     },
            //   },
            // },
            // {
            //   name: "Q上3",
            //   xAxis: seriesData.value.controlUp.toString(),
            //   lineStyle: { color: "blue" },
            //   label: {
            //     color: "blue",
            //     formatter: function (value: any) {
            //       return "{name1|Q}{name2|上3}";
            //     },
            //     rich: rich,
            //     lineHeight: 30,
            //   },
            // },
            // {
            //   name: "Q下3",
            //   xAxis: seriesData.value.controlDown.toString(),
            //   lineStyle: { color: "blue" },
            //   label: {
            //     color: "blue",
            //     formatter: function (value: any) {
            //       return "{name1|Q}{name2|下3}";
            //     },
            //     lineHeight: 30,
            //     rich: rich,
            //   },
            // },
            // {
            //   name: "X̅",
            //   xAxis: seriesData.value.parameterStandards.toString(),
            //   lineStyle: { color: "blue" },
            //   label: {
            //     fontSize: 11,
            //     color: "blue",
            //     formatter: function (value: any) {
            //       return value.name;
            //     },
            //   },
            // },
          ],
        },

        color: "#ff3838",
      },
      {
        name: "相对频率[%]",
        type: "bar",
        yAxisIndex: 0,
        symbol: "none",
        color: "#3ae374",
        barWidth: "100%", // 柱子宽度占类目宽度的百分比
        barGap: "0%",
        lineStyle: {
          width: 1.5,
        },

        data: seriesData.value.ydata2 || [],
      },
    ],
  };

  setTimeout(() => {
    isPdf.value && getImgLabel();
  }, 100);
}

onMounted(() => {});
// 计算y轴最小值
function computedMin(minValue: number) {
  if (seriesData.value.lowerLimitValue < minValue) {
    return seriesData.value.lowerLimitValue - 0.01;
  } else {
    return minValue;
  }
}
// 计算y轴最大值
function computedMax(maxValue: number) {
  if (seriesData.value.upperLimitValue < maxValue) {
    return maxValue;
  } else {
    return seriesData.value.upperLimitValue;
  }
}
function getImgLabel() {
  return new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      imgLabel.value = lineBarEChartsRef.value?.chartInstance.getDataURL({
        type: "jpeg", // 可选 png 或 jpeg
        pixelRatio: 2, // 提高分辨率
        backgroundColor: "#fff", // 设置背景颜色
      });
      resolve();
    }, 300);
  });
}

// 折线图数据变更
const imgLabel = ref();

defineExpose({
  imgLabel,
  getImgLabel,
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 50px;
}

.echarts:nth-last-child(1) {
  border-bottom: none !important;
}
</style>
